<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta charset="utf-8">
    <title>第一个vue应用</title>
    <script src="../js/vue.min.2.7.0.js"></script>
</head>
<body>
<!--
<input>标签用于收集用户信息.type规定了input元素的类型,value指定了输入字段的初始值.
checkbox为复选框类型.
<span>标签被用来组合文档中的行内元素.    <br>是换行标签.
<label> 标签为 input 元素定义标注（标记）,label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
-->
<!--
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ,从而转变为在change
事件中同步,也就是在失去焦点或者按下回车键才更新.
 在 "change" 而不是 "input" 事件中更新
<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为 Number 类型，可以添加一个修饰符number给v-model 来处理输入值：否则你输入的是数字
但是类型却是字符串String,在数字输入框中有用.
<input v-model.number="age" type="number">
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">
-->
<div id="app">
    <p>单个复选框</p>
    <input type="checkbox" v-model="singleCbo" id="singleCbo">
    <label for="singleCbo">{{singleCbo}}</label>

    <p>多个复选框</p>
    <input type="checkbox" v-model="mutilCbo" id="baidu" value="BaiDu">
    <label for="baidu">BaiDu</label>
    <input type="checkbox" v-model="mutilCbo" id="google" value="Google">
    <label for="baidu">Google</label>
    <input type="checkbox" v-model="mutilCbo" id="taobao" value="TaoBao">
    <label for="baidu">TaoBao</label>
    <br>
    <label>选择的值为:{{mutilCbo.length > 0 ? mutilCbo : ''}}</label>
    <br>
    <p>单个单选框</p>
    <input type="radio" v-model="singleRdo" id="singleRdo" value="singleRdo">
    <label for="singleRdo">{{ singleRdo }}</label>
    <p>多个单选框</p>
    <input type="radio" v-model="mutilRdo" id="baidu1" value="BaiDu">
    <label for="baidu1">BaiDu</label>
    <input type="radio" v-model="mutilRdo" id="google1" value="Google">
    <label for="google1">Google</label>
    <input type="radio" v-model="mutilRdo" id="taobao1" value="TaoBao">
    <label for="taobao1">TaoBao</label>
    <br>
    <label>选择的值为:{{mutilRdo.length > 0 ? mutilRdo : ''}}</label>
    <br>
    <p>下拉列表
        <select v-model="selectedItem" name="preferWebSit">
            <option value="">请选择</option>
            <option value="https://www.google.com/">google</option>
            <option value="https://www.baidu.com/">baidu</option>
        </select>
    </p>
    <label>选择的值为:{{selectedItem.length > 0 ? selectedItem : '未选择'}}</label>
    <p>
        <input type="checkbox" v-model="seem">显示/隐藏
        <br>
        <label v-show="seem">你可以看见我???</label><br>
        <label v-if="seem">你可以看见我</label>
        <label v-else="seem">你看不见我</label>
    </p>
    <p>
    <pre><a v-bind:href="url" target="_blank">李某人的搜索</a></pre>
    </p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            singleCbo: true,
            mutilCbo: [],
            singleRdo: true,
            mutilRdo: 'Google',
            selectedItem: 'https://www.google.com/',
            seem: false,
            url: 'https://www.baidu.com/',
        },
    });
</script>
</body>
</html>